<!-- 全国房屋详查数据覆盖情况 -->
<template>
  <el-button type="primary" link  @click="switchingType">
      <!-- {{ showType ? '栋数':'面积' }}  -->
  </el-button>
  <div class="assy">
    <div>
      <p>各省(直辖市)详查数据覆盖率</p>
      <!-- <p>各省(直辖市)详查数据覆盖率({{showType ? '面积':'栋数'}})</p> -->
      <div class="list">
        <vue3-seamless-scroll
          :hover="true"
          :hover-stop="true"
          :list="list"
          :step="0.2"
          class="seamless-warp"
        >
          <div class="list-item" v-for="(item,index) in list" :key="index">
            <span>{{ item.province }}</span>
            <div class="bar"><div class="bar-inner" :style="'width:' + (item.rate) + '%'"></div></div>
            <span class="rate">{{item.num}} ({{item.rate}}%)</span>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
    <div class="assy-total">
      <div class="assy-total-item">
        全国共
        <span>
          <i v-for="item in totalArr" :key="item">{{ item }}</i> 个
        </span>
        省份入库数据
      </div>
      <div class="assy-total-item">
        <span>
          {{ rate }}%
        </span>
        全国覆盖率
      </div>
    </div>
  </div>
</template>
<script setup>
// 引入echats
import { onMounted } from 'vue';
import { getSamplingRate } from '@/api/housingFacilities.js';
const data = reactive({
    showType: false,//展开收起
    list: [],
    num:'',
    rate:'',
})
const { showType, list, num, rate } = toRefs(data)
const totalArr = ref([]);

// 初始显示面积的抽样率情况
function init(){
  getSamplingRate().then((res) => {
    list.value = res.data.dongRates
    num.value = res.data.provinceNum
    rate.value = res.data.coverage
    totalArr.value = res.data.provinceNum ? Array.from(String(res.data.provinceNum)) : []
  });
}
// 显示楼栋的抽样率情况
function change(){
  getSamplingRate().then((res) => {
    list.value = res.data.dongRates
    num.value = res.data.dongNum
    rate.value = res.data.countyDongRate
    totalArr.value = res.data.dongNum ? Array.from(String(res.data.dongNum)) : []
    renderChart()
  });
}
// 切换统计类型
function switchingType() {
  showType.value = !showType.value
  if(showType.value){
    init()
  }else{
    change()
  }
}

// 挂载完成
onMounted(() => {
  // 初始化数据
  init();
})

</script>
<style lang='scss' scoped>
.el-button--primary{
    position: absolute;
    top: 20px;
    right: 0;
    background: transparent !important;
    border: none !important;
    color: #1A76FF !important;
    font-size: 14px;
    cursor: pointer;
    svg{
        width: 14px;
    }
}
.assy{
  margin-top: -50px;
  display: flex;
  p{
    color: #fff;
    font-size: 18px;
    position: relative;
    padding-left: 20px;
    margin: 15px auto 10px;
    &::before{
      content:'';
      display: block;
      width: 3px;
      height: 15px;
      background: #FFFFFF;
      position: absolute;
      top: 5px;
      left: 10px;
    }
  }
  .list{
    width: 310px;
    height: 180px;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    padding: 0 0 10px 8px;
    box-sizing: border-box;
    &-item{
      display: flex;
      text-align: right;
      span{
        display: block;
        line-height: 30px;
        width: 84px;
      }
      .bar{
        width: 132px;
        height: 8px;
        background: rgba(0,0,0,.3);
        border-radius: 0px 5px 5px 0px;
        margin: 11px 5px;
        position: relative;
        &-inner{
          display: block;
          height: 8px;
          background: linear-gradient(90deg, #0775FE 0%, #46FFFF 100%);
          border-radius: 0px 5px 5px 0px;
        }
      }
      span.rate{
        color: #46FFFF;
        width: 70px;
        text-align: right;
      }
    }
  }

  &-total{
    color: #fff;
    margin-top: 15px;
    &-item{
      width: 130px;
      height: 90px;
      background-size: 100% 100%;
      background-image: url('@/assets/images/housing/bg_total.png');
      margin: 10px 10px 0 0;
      text-align: center;
      font-size: 14px;
      box-sizing: border-box;
      span{
        display: block;
        display: flex;
        justify-content: center;
        i{
          display: block;
          width: 18px;
          height: 25px;
          background: #004C86;
          margin: 0 2px;
          font-size: 28px;
          color: #46FFFF;
          font-family: DS-Digital;
          font-weight: 600;
          line-height: 25px;
        }
      }
      &:first-child{
        padding: 6px 0;
        span{
          margin: 8px 0 0;
          line-height: 30px;
        }
      }
      &:last-child{
        padding: 7px 0 0 0;
        span{
          width: 104px;
          height: 59px;
          background-size: 100% 100%;
          background-image: url('@/assets/images/housing/cyl.png');
          color: #46FFFF;
          font-size: 18px;
          line-height: 48px;
          margin-left: 16px;
        }
      }
    }
  }
}
</style>